<template>
  <div>
    <div>
      <van-nav-bar
        title="不凡"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="order">
      <div class="address">
        <div class="item" @click="goAdd">
          <div class="list">
            <div class="addresslist">
              <div class="name">{{ address.name }}</div>
              <div class="info">
                <p class="tel">{{ address.mobile }}</p>
                <p class="add">
                  {{ address.address + address.address_detail }}
                </p>
              </div>
              <div class="jiantou"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="orderbox">
        <div class="item">
          <div>商品合计</div>
          <div>￥{{ allPrise }}</div>
        </div>
        <div class="item">
          <div>运费</div>
          <div>免运费</div>
        </div>
        <div class="item">
          <div>优惠卷</div>
          <div>暂无</div>
        </div>
      </div>
      <div class="cartlist">
        <div class="item" v-for="item in goodsList" :key="item.id">
          <div class="container">
            <div class="left">
              <div class="img">
                <img :src="item.list_pic_url" alt="" />
              </div>
              <div class="info">
                <div class="desc">{{ item.goods_name }}</div>
                <div class="price">￥{{ item.retail_price }}</div>
              </div>
            </div>
            <div class="right">
              <div class="num">x{{ item.number }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div>实付：￥{{ allPrise }}</div>
        <div @click="pay">支付</div>
      </div>
    </div>
  </div>
</template>

<script>
import { order } from "@/api/cart/order.js";
import { Toast } from "vant";

export default {
  props: {},
  data() {
    return {
      address: {},
      allPrise: "",
      goodsList: [],
    };
  },
  computed: {},
  created() {
    this.init();
  },
  mounted() {},
  watch: {},
  methods: {
    init() {
      const id = this.$route.query.ids;
    
      order({
        openId: localStorage.getItem("openId"),
        addressId: id,
      }).then((res) => {
        console.log(res);
        this.address = res.address;
        this.allPrise = res.allPrise;
        this.goodsList = res.goodsList;
      });
    },
    goAdd() {
      this.$router.push({path:"/my/address",query:{type:'1'}});
    },
    pay() {
      Toast.fail("支付接口失败 稍后再试");
    },
    onClickLeft() {
      this.$router.push("/cart");
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.address {
  background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/address-bg-bd30f2bfeb.png)
    0 0 repeat-x #fff;
  padding: 25px 0 15px 0;
  margin-bottom: 10px;
  .item {
    padding: 0 10px;
    .addresslist {
      width: 100%;
      position: relative;
      transition: all 0.3s ease;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .name {
        width: 50px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        align-self: flex-start;
        margin-top: 10px;
      }
      .info {
        padding: 0 10px;
        flex: 1;
        text-align: left;
      }
      .add {
        margin-top: 2px;
        color: #666;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .jiantou {
        width: 25px;
        height: 25px;
        margin: 0 10px;
        background: url(http://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/address-right-596d39df1e.png)
          no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}
.orderbox {
  padding: 0 15px;
  background-color: #fff;
  .orderbox:last-child {
    border: none;
  }
  .item {
    padding: 15px 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #d9d9d9;
  }
}
.cartlist {
  background: #fff;
  margin-top: 10px;
  margin-bottom: 55px;
  .item {
    padding: 10px 0;
    border-bottom: 1px solid #f4f4f4;
    position: relative;
  }
  .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
    .left {
      display: flex;
      align-items: center;
      width: 80%;
      .img {
        width: 62px;
        height: 62px;
        display: block;
        background: #f4f4f4;
        margin-left: 0.26667rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .info {
      width: 50%;
      padding: 10px;
      text-align: left;
      p {
        line-height: 20px;
      }
    }
  }
  .right {
    padding: 25px;
  }
}
.bottom {
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 100%;
  display: flex;
  background: #fff;
}
.bottom :nth-child(1) {
  flex: 1;
  text-align: left;
  line-height: 50px;
  padding-left: 10px;
}
.bottom :nth-child(2) {
  width: 100px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  background: #b4282d;
  color: #fff;
}
</style>
